<!DOCTYPE HTML>
<html>
<head>

    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <meta name="viewport" content="width=device-width  initial-scale=1.0  maximum-scale=1.0  minimum-scale=1.0  user-scalable=no maximum-scale=1"/>  
    <title>延迟加载</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script type="text/javascript" src="jquery-1.11.1.min.js"></script>

    <script type="text/javascript" src="jquery.scrollLoading.js"></script>

    <style type="text/css">
        .container{
            height: 800px;
        }   
    </style>
   
</head>
<body>
<h1>JqueryScrolling 延迟加载</h1>


<h1>内容1</h1>
<div class='container'>
    <img src="http://www.zhangxinxu.com/study/image/pixel.gif" class="scrollLoading" data-url='s1.png' style="background:url(http://www.zhangxinxu.com/study/image/loading.gif) no-repeat center;"/>
</div>

<h1>内容2</h1>
<div class='container'>
    <img src="http://www.zhangxinxu.com/study/image/pixel.gif" class="scrollLoading" data-url='s2.png' style="background:url(http://www.zhangxinxu.com/study/image/loading.gif) no-repeat center;"/>
</div>

<h1>内容3</h1>
<div class='container'>
    <img src="http://www.zhangxinxu.com/study/image/pixel.gif" class="scrollLoading" data-url='s3.png' style="background:url(http://www.zhangxinxu.com/study/image/loading.gif) no-repeat center;"/>
</div>

<h1>内容4</h1>
<div class='container'>
    <img src="http://www.zhangxinxu.com/study/image/pixel.gif" class="scrollLoading" data-url='s4.png' style="background:url(http://www.zhangxinxu.com/study/image/loading.gif) no-repeat center;"/>
</div>

<h1>内容5</h1>
<div class='container'>
    <img src="http://www.zhangxinxu.com/study/image/pixel.gif" class="scrollLoading" data-url='s5.png' style="background:url(http://www.zhangxinxu.com/study/image/loading.gif) no-repeat center;"/>
</div>

<h1>内容6</h1>
<div class='container'>
    <img src="http://www.zhangxinxu.com/study/image/pixel.gif" class="scrollLoading" data-url='s6.png' style="background:url(http://www.zhangxinxu.com/study/image/loading.gif) no-repeat center;"/>
</div>

<h1>内容7</h1>
<div class='container'>
    <img src="http://www.zhangxinxu.com/study/image/pixel.gif" class="scrollLoading" data-url='s7.png' style="background:url(http://www.zhangxinxu.com/study/image/loading.gif) no-repeat center;"/>
</div>

<script type="text/javascript">
    $(".scrollLoading").scrollLoading();
</script>

</body>
</html>